<template>
    <div class="ph-dt-panel">
        <div class="ph-table-panel">
            <ph-button 
            @click="$emit('year-change',y)"
            :active="!isDisabled(y)&&year===y"
            :disabled="isDisabled(y)"
            type="transparent"
            v-for="y in years" :key="y">{{y}}{{lang.year}}</ph-button>
        </div>
    </div>
</template>
<script lang="ts">
import { computed, defineComponent, inject, PropType, Ref } from 'vue'
import {PhButton} from '../base'
export default defineComponent({
    components:{
        PhButton
    },
    props:{
        lang:{type:Object as PropType<Record<string,unknown>>},
        year:{type:Number,default:0}
    },
    setup(props) {
        const start = inject("start") as Ref<Record<string,number>>
        const end = inject("end") as Ref<Record<string,number>>
        const isDisabled = (year:number)=>{
            const s = start.value?start.value.yyyy:false
            const e = end.value?end.value.yyyy:false
            if(s!==false&&e!==false)
                return year<s||year>e
            if(s!==false)
                return year<s
            if(e!==false)
                return year>e
            return false
        }
        const years = computed(()=>{
            const years = []
            for(let i=props.year-7;i<=props.year+7;i++)
                years.push(i)
            return years
        })
        return {years,isDisabled}
    },
})
</script>
